{extend name="system@public:layout" /}
{block name="title"}会员趋势分析{/block}
{block name="head"}
{:widget('common/Form/dateRes')}
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
{/block}
{block name="body"}
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <form class="form-inline" method="post">
            {for start="2017" end="2031" step="1" name="y" }
            {eq name="year" value="$y"}
            <a class="btn btn-info" href="{:url('user',['year'=>$y])}">{$y}年</a>
            {else/}
            <a class="btn btn-white" href="{:url('user',['year'=>$y])}">{$y}年</a>
            {/eq}
            {/for}
        </form>
    </div>
</div>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title"><h5>会员注册下单趋势走向图</h5></div>
                <div class="ibox-content">
                    <div style="height:650px" id="echarts-axisline-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    $(function () {
        var optionsData = {$optionsData};
        var timeData = optionsData.time_data;
        timeData = timeData.map(function (str) {
            return str.replace('2009/', '');
        });

        option = {
            title: {
                text: optionsData.title.text,
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            legend: {
                data: optionsData.legend.data,
                x: 'left'
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            axisPointer: {
                link: {xAxisIndex: 'all'}
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 30,
                    end: 70,
                    xAxisIndex: [0, 1]
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 30,
                    end: 70,
                    xAxisIndex: [0, 1]
                }
            ],
            grid: [{
                left: 50,
                right: 50,
                height: '35%'
            }, {
                left: 50,
                right: 50,
                top: '55%',
                height: '35%'
            }],
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {onZero: true},
                    data: timeData
                },
                {
                    gridIndex: 1,
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {onZero: true},
                    data: timeData,
                    position: 'top'
                }
            ],
            yAxis: [
                {
                    name: optionsData.legend.data[0],
                    type: 'value',
                    max: optionsData.yAxis[0].max
                },
                {
                    gridIndex: 1,
                    name: optionsData.legend.data[1],
                    type: 'value',
                    inverse: true,
                    max: optionsData.yAxis[1].max
                }
            ],
            series: [
                {
                    name: optionsData.legend.data[0],
                    type: 'line',
                    symbolSize: 8,
                    hoverAnimation: false,
                    data: optionsData.series[0].data
                },
                {
                    name: optionsData.legend.data[1],
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    symbolSize: 8,
                    hoverAnimation: false,
                    data: optionsData.series[1].data
                }
            ]
        };
        var chart = echarts.init(document.getElementById("echarts-axisline-chart"));
        if (option && typeof option === "object") {
            chart.setOption(option, true);
            $(window).resize(chart.resize);
        }
    });
</script>
{/block}